<template>
  <el-button class="select-link-btn" @click="openDialog">{{ selectLabel }}</el-button>
  <el-dialog
      title="链接选择"
      v-model="showDialog"
      width="50vw"
      @close="showDialog = false"
      append-to-body
  >
    <el-scrollbar style="height:40vh">
      <div class="link-selector">
        <div class="left-panel">
          <div
              v-for="item in menuItems"
              :key="item"
              :class="{ 'active': currentType === item }"
              class="menu-item"
              @click="currentType = item"
          >
            {{ item }}
            <div v-show="currentType === item" class="vertical-bar"/>
          </div>
        </div>

        <div class="content-panel">
          <template v-if="currentType === '应用页面'">
            <el-button
                v-for="(item) in $dict.link_config"
                :key="item.id"
                :class="{ 'is-selected': selectedLink === item.value }"
                @click="selectedLink = item.value"
            >
              {{ item.label }}
            </el-button>
          </template>
          <template v-else>
            <div class="flex">
              <span style="width: 100px;line-height: 30px;">自定义链接:</span>
              <el-input
                  v-model="selectedLink"
                  placeholder="请输入自定义链接"
                  clearable
              />
            </div>
          </template>
        </div>
      </div>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="showDialog = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
    required: true
  }
})
const emit = defineEmits(['update:modelValue'])
const menuItems = ["应用页面", "自定义链接"]
const showDialog = ref(false)
// 当前选中的类型
const currentType = ref(menuItems[0])
// 表单中选中的链接
const selectedLink = ref("")
// 选中的链接标签
const selectLabel = computed(() => {
  if (!Boolean(props.modelValue)) return '请选择链接'
  const baseLink = props.modelValue.split('?')[0]
  return $dict.link_config.find(item => item.value === baseLink)?.label || props.modelValue
})
const openDialog = () => {
  selectedLink.value = props.modelValue
  showDialog.value = true
}
const handleSubmit = () => {
  emit('update:modelValue', selectedLink.value)
  showDialog.value = false
}
</script>

<style lang="scss" scoped>
.select-link-btn {
  width: 100%;
  display: block;
  text-align: left;
  padding-left: 10px;
}

.link-selector {
  display: flex;
  height: 100%;

  .left-panel {
    width: 200px;
    background: #fff;
  }

  .right-panel {
    margin-left: 15px;
    flex: 1;
  }

  .menu-item {
    width: 180px;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    color: #606266;
    position: relative;
    transition: background-color 0.3s, color 0.3s;

    &:hover {
      background: #f6f8fa;
    }

    &.active {
      color: #409eff;
      background: #f6f8fa;
    }

    .vertical-bar {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: #6366f1;
    }
  }
}

:deep(.el-button) {
  &.is-selected {
    color: #409eff;
    border-color: #409eff;
    background-color: #ecf5ff;
  }
}

.content-panel {
  margin-left: 20px;
  padding: 0 12px;

  .el-button {
    margin: 0 10px 10px 0;
  }
}


</style>
